<template>
  <div class="Special-box">
    <div class="Special" v-for="item in topicListData" :key="item.id">
      <div class="box">
        <img class="pic" :src="item.scene_pic_url" alt="" />
        <div class="title">{{ item.title }}</div>
        <div class="tip">{{ item.subtitle }}</div>
        <div class="price">{{ "￥" +'&nbsp;'+ item.price_info.toFixed(2) + '&nbsp;' + "元起" }}</div>
      </div>
    </div>
    <van-pagination
      v-model="currentPage"
      :page-count="2"
      mode="simple"
      @change="changetopicListData(currentPage)"
    />
  </div>
</template>

<script>
import { topicList } from "@/request/api";
export default {
  data() {
    return {
      topicListData: {},
      currentPage: 1,
    };
  },
  created() {
    topicList({
      page: 1,
      size: 10,
    }).then((res) => {
      // console.log(res);
      //   console.log(this.topicListData);
      this.topicListData = res.data.data;
    });
  },
  methods: {
    changetopicListData(currentPage) {
    //   console.log(currentPage);
      topicList({
        page: currentPage,
        size: 10,
      }).then((res) => {
        this.topicListData = res.data.data;
        window.scrollTo(0, 0);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.Special-box {
  padding-bottom: 1rem;
  .Special {
    padding-bottom: 0.03rem;
    background-color: #f4f4f4;
    .box {
      background-color: #fff;
      text-align: center;
      padding-bottom: 10px;
      margin-bottom: 20px;
      .pic {
        width: 100%;
      }
      .title {
        font-size: 18px;
        margin: 10px 0;
      }
      .tip {
        font-size: 16px;
        margin: 20px 0;
        color: #1f1f1f;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .price {
        color: #9b0000;
        margin-bottom: 10px;
      }
    }
  }
}
/deep/.van-pagination__item {
  color: darkred;
}
/deep/.van-pagination__next,
.van-pagination__prev {
  padding: 0 4px;
  cursor: pointer;
}
/deep/.van-pagination__item--disabled {
  color: #333;
}
/deep/.van-pagination__page-desc{
    display: none;
}
</style>